<template>
  <div class="topNav">
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="(item, index) in breadList"
          :key="index"
          :to="{ path: item.path }"
          >{{ item.name }}</el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="admin">
      <div class="admin-item">
        <i class="el-icon-full-screen" @click="fullScreen"></i>
      </div>
      <div class="admin-item">
        <i class="el-icon-refresh-left" @click="reset"></i>
      </div>
      <div class="admin-item">
        <div class="user">
          <div class="username">
            <el-dropdown>
              <span class="el-dropdown-link" style="font-size: 1.1rem">
                {{ user.nickname
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <router-link to="/profile"
                  ><el-dropdown-item
                    >修改个人资料</el-dropdown-item
                  ></router-link
                >
                <el-dropdown-item divided @click.native="logOut"
                  >退出</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="avatar">
            <img src="../assets/logo.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import screenfull from "screenfull";
1;
export default {
  name: "TopNav",
  inject: ["reload"],
  data() {
    return {
      breadList: [], // 路由集合
      isFullscreen: false,
      user: {
        nickname: "",
        avatarUrl: "",
      },
    };
  },
  created() {
    this.getBreadcrumb();
    this.user.nickname = this.$store.state.nickname;
  },
  mounted() {
    window.onresize = () => {
      if (!this.checkFull()) {
        this.isFullscreen = false;
      }
    };
  },
  methods: {
    //退出操作
    logOut() {
      this.$store
        .dispatch("Logout")
        .then((res) => {
          this.$router.replace("/login");
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    isHome(route) {
      return route.name === "首页";
    },
    getBreadcrumb() {
      let matched = this.$route.matched; //拿到显示的路由路径
      if (!this.isHome(matched[0])) {
        matched = [{ path: "/home", meta: { title: "首页" } }].concat(matched);
      }
      this.breadList = matched;
    },
    fullScreen() {
      if (!screenfull.isEnabled) {
        this.$message({
          message: "你的浏览器不支持全屏",
          type: "warning",
        });
        return false;
      }
      screenfull.toggle();
      this.isFullscreen = true;
    },
    checkFull() {
      var isFull =
        document.fullscreenEnabled ||
        window.fullScreen ||
        document.webkitIsFullScreen ||
        document.msFullscreenEnabled;
      if (isFull === undefined) {
        isFull = false;
      }
      return isFull;
    },
    reset() {
      this.reload();
    },
  },
  watch: {
    //路由改变的时候监听
    $route() {
      this.getBreadcrumb();
    },
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
  text-decoration: none;
}
.topNav {
  width: 100%;
  height: 100%;
  padding: 10px 30px;
  z-index: 999;
}
.breadcrumb {
  float: left;
  position: relative;
  width: 50%;
  height: 100%;
  text-align: left;
  line-height: 9vh;
}
.el-breadcrumb {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  font-size: 1rem;
}
.admin {
  float: right;
  position: relative;
  padding: 2vh 0px;
  width: 30%;
  height: 100%;
  font-size: 1.3rem;
}
.admin-item:nth-child(1) {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 15%;
  height: 70%;
  line-height: 6vh;
}
.admin-item:nth-child(2) {
  position: absolute;
  top: 50%;
  left: 50px;
  transform: translate(0, -50%);
  width: 15%;
  height: 70%;
  line-height: 6vh;
}
.admin-item:nth-child(3) {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  width: 70%;
  height: 70%;
}
.admin-item:hover i {
  cursor: pointer;
  color: #5794ff;
}
.user {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  line-height: 6vh;
  overflow: hidden;
}

.username {
  float: left;
  font-size: 1.1rem;
  width: 70%;
}

.username:hover span {
  cursor: pointer;
  color: #8790fc;
}
.username:hover i {
  color: #8790fc;
}
.avatar {
  float: right;
  margin-right: 5px;
  width: 20%;
  height: 100%;
  border: 2px solid #8790fc;
  border-radius: 50%;
  overflow: hidden;
}
.avatar img {
  width: 90%;
  border-radius: 50%;
}
</style>